<!-- 通用报表 -->
<template>
  <div class="systemPage-wrapper">
    <definition-Detail v-if="visable" @hide="hide"></definition-Detail>
	<parts-Warehouse v-if="isShow" @hide="hide"></parts-Warehouse>
    <div class="topbar">
      <span class="iconfont iconxitongpingtai-tongyongbaobiao"></span>
      <span>通用报表</span>
    </div>
    <div class="content-background">
      <div class="content-wrapper">
        <div class="searches-wrapper">
          <div class="buttons-wrapper">
            <span
              :class="[multipleSelection.length>0&&isAble?'systemButtonDelete':'systemButtonDelete systemButtonDisabled']"
              @click="del"
            >删除</span>
            <span class="systemButtonEdit" @click="edit">编辑</span>
            <span class="systemButtonAdd" @click="add">新增</span>
          </div>
          <div class="query-wrapper">
            <div class="query-box">
              <span class="span-name">时间:</span>
              <el-select v-model="queryList.value" placeholder="请选择" class="systemInput">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="query-box">
              <span class="span-name">时间选择:</span>
              <el-date-picker
                class="systemInput"
                v-model="queryList.timeValue"
                type="date"
                placeholder="选择日期"
                :editable="false"
              ></el-date-picker>
            </div>
            <div class="query-box">
              <span class="span-name">关键词:</span>
              <el-input v-model="queryList.keyword" placeholder="请输入内容" class="systemInput"></el-input>
            </div>
            <span class="systemButtonQuery query-box" @click="queryData(0)">查询</span>
          </div>
        </div>
        <el-table
          class="systemTable"
          :highlight-current-row="true"
          stripe
          :data="historyDate"
          ref="multipleTable"
          :height="tableHeight"
          max-height="calc(100%)"
          size="medium"
          row-class-name="row"
          cell-class-name="column"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
          @select="select"
          @select-all="selectAll"
          @row-click="rowClick"
          style="width: 100%;"
          :fit="true"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            min-width="80"
            v-for="(item, index) in tableLabel"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
        <el-pagination
          class="systemPagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="queryList.pageSize"
          background
          layout="sizes,slot, prev, pager, next, jumper"
          :total="total"
        >
          <span class="totalCount">从{{start}}到{{end}}/共{{total}}条数据</span>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import definitionDetail from "../components/definition/definitionDetail.vue";
import partsWarehouse from "../../business/components/partsWarehouse.vue";
export default {
  components: {
    definitionDetail,
	partsWarehouse
  },
  data() {
    return {
	  isShow:false,
      pageSizes: [10, 20, 30, 40],
      start: 1,
      end: 10,
      isAble: false,
      detailId: "",
      total: 400,
      visable: false,
      count: 100,
      isActive: 1,
      currentPage: 1,
      available: "true",
      historyDate: [],
      tableHeight: 0,
      options: [
        {
          value: "week",
          label: "近一周",
        },
        {
          value: "month",
          label: "近一月",
        },
        {
          value: "year",
          label: "近一年",
        },
      ],

      queryList: {
        timeValue: "",
        keyword: "",
        value: "",
        pageSize: 10,
        page: 0,
      },
      multipleSelection: [],
      // 表格数据
      tableData: [
        {
          id: 1,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "高",
        },
        {
          id: 2,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "高",
        },
        {
          id: 3,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "高",
        },
        {
          id: 4,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "高",
        },
        {
          id: 5,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "高",
        },
        {
          id: 6,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 7,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 8,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 9,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 10,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 11,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 12,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 13,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 14,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
        {
          id: 15,
          date: "2018-07-24",
          type: "信使",
          name: "丁宅变",
          frequency: "低",
        },
      ],
      // 表头数据
      tableLabel: [
        {
          label: "报表名称",
          width: "",
          prop: "name",
        },
        {
          label: "报表类型",
          width: "",
          prop: "type",
        },
        {
          label: "时间",
          width: "",
          prop: "date",
        },
        {
          label: "频率",
          width: "",
          prop: "frequency",
        },
        {
          label: "创建人",
          width: "",
          prop: "creater",
        },
        {
          label: "创建时间",
          width: "",
          prop: "createTime",
        },
      ],
    };
  },
  async mounted() {
    await this.getTableHeight();
    this.queryData(0);
  },
  methods: {
    // table高度
    getTableHeight() {
      let that = this;
      let contentHeight = document.getElementsByClassName("content-wrapper")[0]
        .offsetHeight;
      let searchesHeight = document.getElementsByClassName(
        "searches-wrapper"
      )[0].offsetHeight;
      that.tableHeight = contentHeight - searchesHeight - 72;
      let tableBodyHeight = that.tableHeight - 40;
      that.queryList.pageSize = parseInt(tableBodyHeight / 40);
      this.end = parseInt(tableBodyHeight / 40);
      that.pageSizes.push(that.queryList.pageSize);
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      //根据报警级别显示颜色
      if (row.column.label === "频率" && row.row.frequency === "高") {
        return "color:rgba(83, 167, 255, 1)";
      }
    },
    rowClick(row, col, event) {
      row.flag = !row.flag;
      this.$refs.multipleTable.toggleRowSelection(row, row.flag);
    },
    queryData(page) {
      if (page) {
        this.queryList.page = page - 1;
        this.currentPage = page;
      } else {
        this.queryList.page = 0;
        this.currentPage = 1;
      }
      this.historyDate = this.tableData;
    },
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.start = 1;
      this.end = val;
      this.queryData(0);
    },
    handleCurrentChange(val) {
      this.start = this.queryList.pageSize * (val - 1) + 1;
      this.end = this.queryList.pageSize * val;
      this.queryData(val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let count = 0;
      for (let j = 0; j < this.multipleSelection.length; j++) {
        if (this.multipleSelection[j].state == 0) {
          count = count + 1;
        }
      }
      this.isAble = count;
    },
    select(e) {
      this.multipleSelection = e;
    },
    del(e) {
      if (this.multipleSelection.length === 0) {
        return;
      } else {
        var selections = this.multipleSelection;
        var array = [];
        var arraySend = [];
        Object.keys(selections).forEach(function (i) {
          if (selections[i].state == 0) {
            array.push(selections[i].id);
          } else {
            arraySend.push(selections[i].id);
          }
        });
        var ids = array.join(",");
        var sendIds = arraySend.join(",");
        if (sendIds.length > 0) {
          this.message("选中的信息中存在已发送消息，已发送信息不允许删除！", 3);
          return false;
        }
        if (ids == undefined || ids.length <= 0) {
          this.message("请先选中需要删除的消息！", 3);
          return false;
        }
        this.messageBox("确认删除？").then((c) => {
          if (c.action) {
          }
        });
      }
    },
    edit(e) {
      if (this.multipleSelection.length !== 1) {
        this.message("必须选中一条记录", 3);
        return false;
      }
      if (this.multipleSelection[0].state == 1) {
        this.message("已发送的信使不允许编辑！", 3);
        return false;
      }
      this.visable = true;
      this.detailId = this.multipleSelection[0].id;
    },
    add() {
      this.isShow = true;
      this.detailId = 0;
    },
    selectAll(e) {
      this.multipleSelection = e;
    },
    hide() {
      this.visable = false;
      this.isShow = false;
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>

<style scoped>
.center {
  overflow-y: auto;
  min-width: 1200px;
  width: 100%;
  height: calc(100% - 42px);
}
</style>
<style>
</style>
